<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>webrx</title>
    <script src="https://unpkg.com/axios"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    <style>
        .container {
            padding: 15px;
        }

        .container > button {
            margin: 10px;
        }
    </style>

</head>
<body>
<div class="container">
    <input name="fs" type="file" multiple>
    <hr>
    <button type="button" class="btn btn-primary">axios post</button>
    <button type="button" class="btn btn-secondary">axios(config post)</button>
    <button type="button" class="btn btn-danger">axios post form data</button>
    <button type="button" class="btn btn-success">axios upfile</button>
    <button type="button" class="btn btn-warning">axios up many file </button>
</div>
<script>
    let btns = document.querySelectorAll('button')
    //简单的axios post请求
    btns[0].onclick = function () {
        axios.post('post.php',{id:111,name:'杰克'},{headers: {token: '11111111111111111111'}}).then(res => {
            if (res.data.code === 200) {
                console.log(res.data.msg)
                console.log(res.data.data.id)
                console.log(res.data.data.name)
                console.log(res.data.token)
            }
        }).catch(err => console.log(err))
    }

    //post 请求载荷数据
    btns[1].onclick = function () {
        axios({
            method: 'POST',
            url: 'post.php',
            data: {
                id: 66,
                name: '李勇'
            },
            headers: {
                token: '2222222222'
            }
        }).then(res => {
            if (res.data.code === 200) {
                console.log(res.data.msg)
                console.log(res.data.data.id)
                console.log(res.data.data.name)
                console.log(res.data.token)
            }
        }).catch(err => console.log(err))
    }

    //post form data
    btns[2].onclick = function () {
        axios({
            method: 'POST',
            url: 'post2.php',
            data: {
                id: 66,
                name: '李勇'
            },
            headers: {
                'content-type': 'application/x-www-form-urlencoded',
                token: '2222222222'
            }
        }).then(res => {
            if (res.data.code === 200) {
                console.log(res.data.msg)
                console.log(res.data.data.id)
                console.log(res.data.data.name)
                console.log(res.data.token)
            }
        }).catch(err => console.log(err))
    }

    //上传文件
    let f = document.querySelector("input[name='fs']")
    btns[3].onclick = function () {
        let formData = new FormData()
        formData.append('id',66)
        formData.append('name','王勇')
        formData.append('photo', f.files[0]);
        axios({
            method: 'POST',
            url: 'post3.php',
            data: formData,
            headers: {
                token: '2222222222'
            }
        }).then(res => {
            if (res.data.code === 200) {
                console.log(res.data.msg)
                console.log(res.data.data.id)
                console.log(res.data.data.name)
                console.log(res.data.token)
            }
        }).catch(err => console.log(err))
    }

    //上传文件
    let f2 = document.querySelector("input[name='fs']")
    btns[4].onclick = function () {
        let formData = new FormData()
        formData.append('id',66)
        formData.append('name','王勇')
        for (const file of f2.files) {
            formData.append('photo[]', file, file.name)
        }
        axios({
            method: 'POST',
            url: 'post3.php',
            data: formData,
            headers: {
                token: '2222222222'
            }
        }).then(res => {
            if (res.data.code === 200) {
                console.log(res.data.msg)
                console.log(res.data.data.id)
                console.log(res.data.data.name)
                console.log(res.data.token)
            }
        }).catch(err => console.log(err))
    }
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
